<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/banner.css">
</head>
<body>
    <div class="list">
        <div class="imgs">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">

            <!-- 设置最后一张猫腻图 -->
            <img src="img/1.jpg" alt="">
        </div>
        <ul class="btns">
            <li class="choose"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev">
            <div class="left-arrow"></div>
        </div>
        <div class="next">
            <div class="right-arrow"></div>
        </div>
    </div>
    <!-- 引入jq文件 -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        // 获取元素对象
        var $list = $(".list");
        var $imgs =  $(".imgs");
        var $btns = $(".btns li");
        var $prev = $(".prev");
        var $next = $(".next");
        var timebar;

        // 设置初始化
        var index = 0;

        function changeImage(fn) {
            
            $imgs.stop(true).animate({left:index*-520}, 500, function () {
                    // 设置当第5张时设置index=1,同时将位置移动到第一张位置
                    if (index === 5) {
                        index = 0;
                        $imgs.css("left", index*-520);
                    } 
                    // 设置圆点
                    $btns.eq(index).addClass("choose").siblings().removeClass("choose");
                });
                fn && fn();
        }
        
        // 设置循环轮播,3s切换一张
        function startInterval() {
            timebar = setInterval(function () {
                // 切换图片
                index++;
                changeImage();
            },3000);
        }

        startInterval();

        // 点击圆点直接切换
        $btns.click(function(){
            // 切换图片
            // 停止动画
            index = $(this).index();  
            clearInterval(timebar);
            // 启动动画
            // changeImage();
            changeImage(startInterval);
        })

        // 移动到图片上显示左右按钮
        $list.mouseenter(function () {
            $prev.css({"visibility":"visible"});
            $next.css({"visibility":"visible"});
        })

        $list.mouseleave(function () {
            $prev.css({"visibility":"hidden"});
            $next.css({"visibility":"hidden"});
        })

        // 点击箭头切换左右
        // 右侧箭头
        $next.click(function () {
            // 1.清除定时器
            clearInterval(timebar);
            
            // 2.更改索引值(边界处理)
            index++;

            // 3.切换动画
            changeImage(startInterval);
        });

        // 点击左侧箭头切换
        $prev.click(function () {
            // 1.清除定时器
            clearInterval(timebar);
            // 2.更改索引值(边界处理)
            index--;
            if (index<0) {
                // 定位到最后
                index = 4
                // 把当前位置移动到最后
                $imgs.css("left",-520*(index+1))
            }

            // 3.切换动画
            changeImage(startInterval);
        })
    </script>
</body>
</html>